<!--
 * @Author: your name
 * @Date: 2020-09-01 14:49:59
 * @LastEditTime: 2020-09-10 15:11:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\layout\basice-aside-menu.vue
-->
<template>
  <el-submenu :index="menu.WebUrl?menu.WebUrl:menu.AdminMenuId"  v-if="menu.ChildRen" :key="menu.AdminMenuId">
      <template #title>
        <i v-if="menu.Icon" :class="menu.Icon + ' el-icon--left'"></i>
        <span>{{menu.Name}}</span>
      </template>
    <BasicAsideMenuItem v-for="childItem in menu.ChildRen" :key="childItem.AdminMenuId" :menu="childItem" />
  </el-submenu>
  <el-menu-item :index="menu.WebUrl?menu.WebUrl:menu.AdminMenuId" v-else :key="menu.AdminMenuId">
      <i v-if="menu.Icon" :class="menu.Icon + ' el-icon--left'"></i>
      <span>{{ menu.Name }}</span>
  </el-menu-item>
</template>

<script>
import { getCurrentInstance } from 'vue';
export default {
  name: 'BasicAsideMenuItem',
  props: {
    menu: {
      type: Object,
      default: () => {}
    }
  },setup() {
    const { ctx } = getCurrentInstance();
    // function selectMenu(menu) {
    //   if (menu.WebUrl) {
    //     ctx.$router.push({
    //       name: menu.WebUrl
    //     });
    //   }
    // }

    return {
      // selectMenu
    };
  }
};
</script>
<style lang="scss">
.el-menu-item{
  text-align: left;
}
.el-submenu{
  text-align: left;
}
</style>
